<template>
  <div class="login-page">
    <!-- 背景装饰层 -->
    <div class="bg-pattern"></div>
    
    <!-- 主容器 -->
    <div class="login-wrapper">
      <!-- 左侧品牌区 -->
      <div class="brand-section">
        <div class="brand-logo">
          <img v-if="showData.logo" :src="showData.logo" :alt="showData.description" />
          <div v-else class="default-logo">
            <i class="icon-shield"></i>
          </div>
        </div>
        <div class="brand-content">
          <h1>{{ showData.description }}</h1>
          <p>{{ showData.slogan }}</p>
          <div class="brand-stats">
            <div class="stat-item">
              <span class="stat-value">99.9%</span>
              <span class="stat-label">可靠性</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">24/7</span>
              <span class="stat-label">全天候支持</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">10k+</span>
              <span class="stat-label">企业用户</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧登录区 -->
      <div class="login-panel">
        <div class="panel-header">
          <h2>{{ passModel ? '账号密码登录' : '企业微信扫码登录' }}</h2>
          <button 
            class="switch-btn" 
            @click="passModel = !passModel"
          >
            {{ passModel ? '扫码登录' : '密码登录' }}
          </button>
        </div>
        
        <!-- 密码登录表单 -->
        <div v-show="passModel" class="login-form">
          <div class="form-field">
            <label class="field-label">账号</label>
            <div class="input-group">
              <i class="icon-user"></i>
              <input 
                v-model="userInfo.userName" 
                type="text" 
                @keypress="loginNamePress"
                placeholder="请输入账号" 
                autocomplete="off"
              />
            </div>
          </div>
          
          <div class="form-field">
            <label class="field-label">密码</label>
            <div class="input-group">
              <i class="icon-lock"></i>
              <input 
                ref="passwordInput"
                v-model="userInfo.password" 
                :type="showPwd ? 'text' : 'password'" 
                @keypress="loginPasswordPress"
                placeholder="请输入密码" 
                autocomplete="off"
              />
              <button 
                class="toggle-pwd" 
                @click="showPwd = !showPwd"
                type="button"
              >
                <i :class="showPwd ? 'icon-eye-off' : 'icon-eye'"></i>
              </button>
            </div>
          </div>
          
          <button 
            class="submit-btn" 
            @click="login" 
            :disabled="loading"
          >
            <span v-if="!loading">安全登录</span>
            <span v-if="loading" class="loading-indicator">
              <i class="spinner"></i> 登录中...
            </span>
          </button>
          
          <div class="form-actions">
            <button 
              class="action-btn" 
              @click="downloadPrint"
              type="button"
            >
              <i class="icon-download"></i> 打印插件
            </button>
            <el-tooltip effect="dark" placement="top">
              <template #content>
                <vueQr :text="qrText" :size="140" />
              </template>
              <button class="action-btn" type="button">
                <i class="icon-mobile"></i> PDA下载
              </button>
            </el-tooltip>
          </div>
        </div>
        
        <!-- 扫码登录区域 -->
        <div v-show="!passModel" class="qr-section">
          <div class="qr-container">
            <div class="qr-holder">
              <!-- 企业微信登录二维码占位 -->
              <img src="" 
                alt="企业微信扫码登录" 
                class="qr-code"
              />
              <div class="qr-refresh">
                <i class="icon-refresh"></i>
              </div>
            </div>
            <p class="qr-desc">请使用企业微信扫码登录</p>
            <p class="qr-expire">二维码将在 <span class="countdown">120</span> 秒后过期</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="page-footer">
      <p>© {{ showData.copyYear }} {{ showData.copyright }} 版权所有</p>
    </footer>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, getCurrentInstance, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import store from '../store/index'
import http from '@/../src/api/http.js'
import { ElNotification, ElTooltip } from 'element-plus'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

export default defineComponent({
  components: {
    vueQr,
    ElTooltip
  },
  setup() {
    // 状态管理
    const loading = ref(false)
    const showPwd = ref(false)
    const passModel = ref(true) // true:密码登录 false:扫码登录
    const qrText = ref(null)
    
    // 用户信息
    const userInfo = reactive({
      userName: '',
      password: '',
      UUID: undefined,
    })
    
    // 系统配置
    const defaultLogo = new URL('@/assets/imgs/dgz-logo.png', import.meta.url).href
    const showData = ref({
      description: '安泰科技稀土永磁材料生产计划排程系统',
      copyright: '',
      logo: '',
      copyYear: "2024-2025"
    })
    
    // 组件引用
    const passwordInput = ref(null);
    const { proxy } = getCurrentInstance()
    const appContext = getCurrentInstance().appContext
    const $message = appContext.config.globalProperties.$message
    const router = useRouter()

    // 登录方法
    const login = () => {
      if (!userInfo.userName) return $message.error('请输入账号')
      if (!userInfo.password) return $message.error('请输入密码')
      
      loading.value = true
      http
        .post('/api/user/login', userInfo, '正在登录....', { noMessage: true })
        .then((result) => {
          ElNotification({
            title: '登录成功',
            message: `欢迎您 ${userInfo.userName}`,
            type: 'success',
            offset: 35,
          })
          store.commit('setUserInfo', result)
          router.push({ path: '/' })
        })
        .catch((err) => {
          $message.error(err.message)
        })
        .finally(() => {
          loading.value = false
        })
    }
    
    // 键盘事件处理
    const loginNamePress = (e) => {
      if (e.keyCode !== 13) return
      if (userInfo.password) {
        login()
      } else {
        nextTick(() => {
          passwordInput.value?.focus()
        })
      }
    }
    
    const loginPasswordPress = (e) => {
      if (e.keyCode === 13) login()
    }
    
    // 下载打印插件
    const downloadPrint = () => {
      window.open('http://124.222.220.210:9100/Upload/Tools/DgzImpTools.msi', '_blank')
    }
    
    // 获取PDA下载地址
    const getAppUrl = () => {
      http.get('api/Bas_Version/GetCurApkPkg').then(r => {
        if (r) {
          qrText.value = r?.PkgUrl ?? '暂未获取下载地址'
        }
      })
    }
    
    // 获取系统配置
    const getSystemInfo = () => {
      const data = { module: 1 }
      http.get('api/Bas_Parameter/GetParamerIniByModule', data).then(r => {
        if (r) {
          const logo = r.find(i => i.ParamName === 'system_logo')
          const copyright = r.find(i => i.ParamName === 'copyright')
          const copyYear = r.find(i => i.ParamName === 'copyYear')
          
          showData.value.logo = logo?.ParamValue || defaultLogo
          showData.value.copyright = copyright?.ParamValue || "安徽大工造"
          showData.value.copyYear = copyYear?.ParamValue || "2024-2025"
        }
      })
    }
    
    // 初始化
    onMounted(() => {
      getAppUrl()
      getSystemInfo()
    })
    
    return {
      loading,
      userInfo,
      showData,
      showPwd,
      passModel,
      qrText,
      passwordInput,
      login,
      downloadPrint,
      loginNamePress,
      loginPasswordPress
    }
  }
})
</script>

<style lang="less" scoped>
// 基础样式
.login-page {
  min-height: 100vh;
  background: #121826;
  color: #e2e8f0;
  font-family: 'Inter', system-ui, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
}

// 背景图案
.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(rgba(79, 70, 229, 0.1) 1px, transparent 1px),
    radial-gradient(rgba(79, 70, 229, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
  z-index: 0;
}

// 主容器
.login-wrapper {
  display: flex;
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

// 品牌区域
.brand-section {
  flex: 1.2;
  padding: 60px 80px 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  .brand-logo {
    margin-bottom: 50px;
    width: 80px;
    height: 80px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    
    img {
      max-width: 60px;
      max-height: 60px;
    }
    
    .default-logo {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .icon-shield {
        width: 40px;
        height: 40px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23818cf8'%3E%3Cpath d='M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1ZM12 21C8.24 20 5 15.54 5 11.09V6.3L12 3.1l7 3.2V11.09C19 15.54 15.76 20 12 21Z'/%3E%3C/svg%3E") no-repeat center;
      }
    }
  }
  
  .brand-content {
    h1 {
      font-size: 2.8rem;
      font-weight: 700;
      margin: 0 0 20px 0;
      background: linear-gradient(90deg, #e2e8f0, #94a3b8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    
    p {
      font-size: 1.1rem;
      color: #94a3b8;
      max-width: 500px;
      line-height: 1.7;
      margin: 0 0 40px 0;
    }
  }
  
  .brand-stats {
    display: flex;
    gap: 40px;
    margin-top: 60px;
    
    .stat-item {
      .stat-value {
        display: block;
        font-size: 1.8rem;
        font-weight: 600;
        color: #818cf8;
        margin-bottom: 8px;
      }
      
      .stat-label {
        color: #94a3b8;
        font-size: 0.9rem;
      }
    }
  }
}

// 登录面板
.login-panel {
  width: 420px;
  background: rgba(25, 33, 50, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
  align-self: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.4);
  }
  
  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    
    h2 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 600;
      color: #e2e8f0;
    }
    
    .switch-btn {
      background: transparent;
      border: none;
      color: #818cf8;
      font-size: 0.9rem;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 6px;
      transition: all 0.2s ease;
      
      &:hover {
        background: rgba(129, 140, 248, 0.1);
        color: #a5b4fc;
      }
    }
  }
}

// 表单样式
.login-form {
  .form-field {
    margin-bottom: 30px;
    
    .field-label {
      display: block;
      margin-bottom: 10px;
      font-size: 0.9rem;
      color: #94a3b8;
      font-weight: 500;
    }
    
    .input-group {
      position: relative;
      height: 52px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      transition: all 0.2s ease;
      
      &:focus-within {
        border-color: #818cf8;
        box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
      }
      
      i {
        width: 20px;
        height: 20px;
        margin-right: 12px;
        opacity: 0.7;
      }
      
      .icon-user {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M12 2C6.47 2 2 6.5 2 12s4.47 10 10 10 10-4.5 10-10S17.53 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E") no-repeat center;
      }
      
      .icon-lock {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z'/%3E%3C/svg%3E") no-repeat center;
      }
      
      input {
        flex: 1;
        height: 100%;
        background: transparent;
        border: none;
        outline: none;
        color: #e2e8f0;
        font-size: 1rem;
        padding-right: 10px;
        
        &::placeholder {
          color: #64748b;
        }
      }
      
      .toggle-pwd {
        background: transparent;
        border: none;
        width: 24px;
        height: 24px;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.2s;
        
        &:hover {
          opacity: 1;
        }
        
        .icon-eye {
          width: 100%;
          height: 100%;
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E") no-repeat center;
        }
        
        .icon-eye-off {
          width: 100%;
          height: 100%;
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M17.94 17.94c-0.47-0.47-1.11-0.7-1.77-0.7h-1.77L12 16l-1.3 1.3c-0.66 0-1.3.23-1.77.7l-0.1.1c-0.48.48-0.48 1.26 0 1.74 0.48 0.48 1.26 0.48 1.74 0l0.1-0.1c1.42-1.42 3.26-2.24 5.19-2.24 1.93 0 3.77 0.82 5.19 2.24l0.1 0.1c0.48 0.48 1.26 0.48 1.74 0 0.48-0.48 0.48-1.26 0-1.74l-0.1-0.1zM12 14c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2zM2 12c0-5.52 4.48-10 10-10s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 8c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E") no-repeat center;
        }
      }
    }
  }
  
  .submit-btn {
    width: 100%;
    height: 54px;
    background: #818cf8;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    
    &:hover {
      background: #6366f1;
      transform: translateY(-2px);
    }
    
    &:active {
      transform: translateY(0);
    }
    
    &:disabled {
      background: #475569;
      cursor: not-allowed;
      transform: none;
    }
  }
  
  .loading-indicator {
    display: flex;
    align-items: center;
    
    .spinner {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 1s linear infinite;
      margin-right: 8px;
    }
  }
  
  .form-actions {
    display: flex;
    justify-content: space-between;
    
    .action-btn {
      display: flex;
      align-items: center;
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 0.9rem;
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 6px;
      transition: all 0.2s ease;
      
      &:hover {
        background: rgba(148, 163, 184, 0.1);
        color: #cbd5e1;
      }
      
      i {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
      
      .icon-download {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E") no-repeat center;
      }
      
      .icon-mobile {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M17 18H7V6h10v12zM7 4c-1.11 0-1.99.9-1.99 2L5 20c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H7zm9 14H8v-2h8v2zm0-4H8v-2h8v2zm0-4H8V8h8v2z'/%3E%3C/svg%3E") no-repeat center;
      }
    }
  }
}

// 扫码登录区域
.qr-section {
  .qr-container {
    text-align: center;
    padding: 20px 0;
    
    .qr-holder {
      position: relative;
      display: inline-block;
      width: 200px;
      height: 200px;
      margin-bottom: 20px;
      
      .qr-code {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
      
      .qr-refresh {
        position: absolute;
        bottom: -8px;
        right: -8px;
        width: 36px;
        height: 36px;
        background: #1e293b;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease;
        
        &:hover {
          transform: rotate(90deg);
        }
        
        .icon-refresh {
          width: 18px;
          height: 18px;
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23818cf8'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c3.78 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") no-repeat center;
        }
      }
    }
    
    .qr-desc {
      font-size: 1rem;
      color: #e2e8f0;
      margin: 0 0 8px 0;
    }
    
    .qr-expire {
      font-size: 0.85rem;
      color: #64748b;
      margin: 0;
      
      .countdown {
        color: #818cf8;
        font-weight: 600;
      }
    }
  }
}

// 页脚
.page-footer {
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
  
  p {
    margin: 0;
  }
}

// 动画
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 1024px) {
  .login-wrapper {
    flex-direction: column;
    padding: 30px 20px;
  }
  
  .brand-section {
    padding: 20px;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    
    .brand-content {
      p {
        margin-left: auto;
        margin-right: auto;
      }
    }
    
    .brand-stats {
      justify-content: center;
    }
  }
  
  .login-panel {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  .login-panel {
    padding: 30px 20px;
  }
  
  .brand-section {
    .brand-content h1 {
      font-size: 2.2rem;
    }
    
    .brand-stats {
      gap: 20px;
    }
  }
}
</style>